<script setup>
import { computed, ref } from 'vue'

/*
  计算属性: 
     使用场景：依赖一个或者多个值产生一个新的值(值都是响应式的)
     特点：它有缓存特性
     用法：
       1：导入  import {computed} from 'vue'
       2:定义
          const xxx = computed(()=>{
             return 新的值
          })
             xxx数据类型和ref返回值类型一样  xxx={value:新的值}
       3:使用
          html:{{xxx}}
          js: xxx.value
*/
const num = ref(1000)
const money = computed(() => {
  console.log('money 计算属性')
  return num.value * 7.3
})
const btnClick = () => {
  console.log('money', money.value)
}
</script>

<template>
  <div class="app-page">{{ money }}</div>
  <div class="app-page">{{ money }}</div>
  <div class="app-page">{{ money }}</div>
  <div class="app-page">{{ money }}</div>
  <button @click="btnClick">获取money的值</button>
</template>

<style scoped></style>
